<template>
  <div class="main">
    <div class="headcard">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="title">{{ $t("Exchange") }}</div>
        <div class="head-tips" @click="$router.push('/exchangeHistory')">
          <img src="@/assets/img/18.png" />
        </div>
      </div>

      <div class="hbox recharge">
        <div class="hbox-head">
          <div class="hbox-head-left">{{ $t("ExchangeGameCoins") }}</div>
          <!-- <div class="hbox-head-right">?</div>  -->
        </div>
        <div class="tips">
          <div
            :class="[
              'chip_amount',
              { red: Number(value) > Number(assets_available) },
            ]"
          >
            &nbsp;&nbsp;
            <!-- <img
              src="@/assets/img/diamondd.png"
              alt=""
              style="width: 20px; height: 20px"
            /> -->
            &nbsp;{{ formatMoney(assets_available, true) }} {{ $t("USD") }}
          </div>
          <div class="chip_amount">
            <!-- <i class="icon"></i> -->
            <img src="@/assets/img/gold.png" alt="" />
            &nbsp;&nbsp;{{ chip_amount }}
          </div>
        </div>

        <div class="inputbox">
          <div class="input" @click="keyShow = true">
            <!-- <div class="inputvalue">{{ value }}</div> -->
            <input type="text" id="inputxx" :value="value" />

            <!-- <div class="icon"></div> -->
          </div>
          <div class="game-type">
            {{ $t("AllGame") }}
            <!-- Semua Permainan -->
          </div>
          <div class="ib-r" @click="chooseShow = true">
            <div class="ib-r-img">
              <img :src="activeGame.icon" />
            </div>
            <div class="xiala"></div>
          </div>
        </div>
        <div class="hbox-tips">
          <!-- <div :class="{ red: Number(value) > Number(assets_available) }">
            Balance：&nbsp;&nbsp;{{
              formatMoney(assets_available, true)
            }}
          </div> -->
          <div class="icon-box">
            1&nbsp;&nbsp;
            <i class="diamond-icon"
              ><img
                src="@/assets/img/diamondd.png"
                alt=""
                style="width: 20px; height: 20px" /></i
            >&nbsp; = 1000
            <!-- <i class="gold-icon"></i>    -->
            &nbsp;<img src="@/assets/img/gold.png" alt="" />
          </div>
          <div class="etcs" @click="$router.push('/recharge')">
            {{ $t("isiUlang") }}
          </div>
        </div>
      </div>

      <div class="textContent">
        <p v-html="exchange_tip"></p>
        <p v-html="activity_msg"></p>
      </div>
    </div>
    <InputNumber
      ref="InputNumber"
      @update="update"
      @query="query"
      btntext="Pertukaran"
      v-show="keyShow"
    />

    <!-- select -->
    <van-popup v-model="chooseShow" round position="bottom" closeable>
      <div class="uapopup">
        <div class="head">{{ $t("Choose") }}</div>
        <div class="sbox">
          <div class="searchbox">
            <input
              type="text"
              v-model="searchValue"
              @input="searchValueChange"
              :placeholder="$t('Search')"
            />
            <div class="searchiconbox" @click="searchGame">
              <img src="@/assets/img/search.png" />
            </div>
          </div>
          <div class="scctit">
            {{ $t("SemuaPermainan") }}（{{ gameList.length }}）
          </div>
        </div>
        <div class="list">
          <div
            @click="selectGame(v)"
            :class="['list-item', { active: activeGame.id == v.id }]"
            v-for="v in gameList"
            :key="v.id"
          >
            <div class="li-l">
              <img :src="v.icon" />
              {{ v.name }}
            </div>
            <div class="li-r"></div>
          </div>
        </div>

        <!-- <div class="sure-btn" @click="chooseShow = false">sure</div> -->
      </div>
    </van-popup>

    <!-- query -->
    <van-popup v-model="queryShow" round>
      <div class="querybox-c">
        <div class="qb-tit">{{ $t("PleaseConfirm") }}</div>
        <div class="qb-nkis">
          <img :src="activeGame.icon" />
          <!-- {{ activeGame.tittle }} -->{{ $T("AllGames") }}
          <!-- All Game -->
        </div>
        <div class="qb-tbxc">
          <div class="qt-l">{{ $t("Exchange") }}</div>
          <div class="qt-r">
            {{ value * 1000 }}
            <div class="icon"></div>
          </div>
        </div>
        <div class="btnlist">
          <div class="btn cancel" @click="queryShow = false">
            {{ $t("Cancelled") }}
          </div>
          <div class="btn ok" @click="ok">
            <template v-if="okAjax">
              <van-loading color="#fff" />
            </template>
            <template v-else>{{ $t("OK") }}</template>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import InputNumber from "./components/InputNumber.vue";
import {
  httpGameList,
  httpTransferChip,
  httpInfo,
  httpExchangeGames,
} from "@/http/api";
import { formatMoney } from "@/utils/common";
export default {
  name: "recharge",
  components: { InputNumber },
  data() {
    return {
      value: "0.00",
      chooseShow: false,
      queryShow: false,
      gameList: [],
      oldGameList: [],
      activeGame: {},
      searchValue: "",
      game_icon: "",
      okAjax: false,
      assets_total: 0, // 总资产
      assets_available: 0, //可用资产
      assets_freeze: 0, //冻结资产
      chip_amount: 0, //游戏筹码额度
      game_id: 0, //游戏ID
      keyShow: false,
      exchange_tip: "",
      activity_msg: "",
    };
  },
  created() {
    this.getHttpInfo();
    this.getHttpGameList();
    this.getExchangeGames();
  },
  methods: {
    formatMoney,
    async getHttpInfo() {
      let res = await httpInfo();
      if (res.code == 0) {
        this.assets_total = res.data?.diamond || 0;
        this.assets_available = res.data?.diamond || 0;
        this.assets_freeze = res.data?.diamond || 0;
      }
    },
    update(value) {
      // document.getElementById("inputxx").focus();
      if (value == -1) {
        if (this.value == "0.00") {
          this.value = "";
          //this.$refs.InputNumber.disabled = true
        } else {
          this.value = this.value.substring(0, this.value.length - 1);
          // if (this.value) this.$refs.InputNumber.disabled = false
          // else this.$refs.InputNumber.disabled = true
        }
      } else {
        if (this.value == "0.00") {
          this.value = "";
          //this.$refs.InputNumber.disabled = true
        }
        if (!this.value && value == ".") return;
        this.value += value;
        this.value = this.value.toString().match(/^\d+(?:\.\d{0,2})?/)[0];

        // this.$refs.InputNumber.disabled = false
      }
    },
    query() {
      if (!this.value.trim() || Number(this.value) == 0) return;
      // return this.$toast("Please enter the amount");
      if (Number(this.value) > this.assets_available) {
        return this.$toast("Insufficient Balance");
      }
      this.queryShow = true;
    },
    // 获取兑换游戏列表
    async getExchangeGames() {
      let res = await httpExchangeGames({ page: 1 });
      if (res.code == 0) {
        // console.log(res)
        this.chip_amount = res.data?.list[0]?.chip_amount || 0;
        this.game_id = res.data?.list[0]?.id || 0;
        this.exchange_tip = res.data?.exchange_tip.replace(/\n/g, "<br/>");
        // this.game_id = res.data?.list[0]?.id || 0;
        this.activity_msg = res.data?.activity_msg.replace(/\n/g, "<br/>");
        console.log(this.chip_amount);
      }
    },
    async getHttpGameList() {
      let res = await httpGameList();
      if (res.code == 0) {
        this.gameList = res.data.list || [];
        this.oldGameList = res.data.list || [];

        this.gameList.sort((a, b) => a["name"].localeCompare(b["name"]));
        this.oldGameList.sort((a, b) => a["name"].localeCompare(b["name"]));

        if (this.gameList.length) {
          this.activeGame = this.gameList[0];
        }
      }
    },

    searchGame() {
      if (this.searchValue.trim()) {
        this.gameList = this.oldGameList.filter((v) => {
          return v.name.indexOf(this.searchValue) > -1;
        });
      }
    },
    searchValueChange() {
      if (!this.searchValue.trim()) {
        this.gameList = this.oldGameList;
      }
    },
    selectGame(v) {
      this.chooseShow = false;
      this.activeGame = v;
    },
    async ok() {
      if (this.okAjax) return;
      let params = {
        chip: this.value,
        // game_id: this.activeGame.id,
        // 默认2
        game_id: this.game_id,
      };
      this.okAjax = true;
      let res = await httpTransferChip(params);
      this.okAjax = false;
      if (res.code == 0) {
        this.$toast.success("success");
        this.queryShow = false;
        this.getHttpInfo();
        this.getExchangeGames();
      } else {
        this.$toast(res.message);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import url("./acc.less");
@import url("./newFont.less");

* {
  font-weight: 400;
  color: #93653e;
}

.hbox-head {
  margin-bottom: 10px !important;
}

.tips {
  color: #fff;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .red {
    color: red !important;
  }

  .chip_amount {
    display: flex;
    align-items: center;
    img {
      width: 40px;
      margin: -8px;
      padding: 0 1px;
    }

    .icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
    }
  }
}

.hbox-tips {
  /**.red {
    color: red !important;
  }**/
  .icon-box {
    display: flex;
    align-items: center;
    img {
      width: 40px;
      margin: -8px;
      padding: 0 1px;
    }
  }

  .diamond-icon {
    width: 30px;
    height: 30px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .gold-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }
}

.uapopup {
  .head {
    height: 112px;
    width: 100%;
    font-size: 30px;
    font-weight: 700;
    color: rgba(112, 126, 162, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(241, 241, 241, 1);
  }

  .sbox {
    width: 100%;
    padding: 32px;

    .searchbox {
      display: flex;
      width: 100%;
      height: 92px;
      opacity: 1;
      background: rgba(246, 247, 252, 1);
      justify-content: space-between;
      align-items: center;
      padding: 0 10px 0 32px;
      border-radius: 20px;
      margin-bottom: 26px;

      input {
        flex: 1;
        height: 100%;
        background: transparent;
        outline: none;
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 0px;
        color: rgba(132, 144, 177, 1);
        border: none;

        &::-webkit-input-placeholder {
          font-size: 28px;
          font-weight: 400;
          letter-spacing: 0px;
          color: rgba(193, 194, 211, 1);
        }

        #inputxx {
          border: none;
        }
      }

      .searchiconbox {
        width: 76px;
        height: 76px;
        background: rgba(132, 144, 177, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;

        img {
          width: 48px;
          height: 48px;
        }
      }
    }

    .scctit {
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(132, 144, 177, 1);
    }
  }

  .list {
    width: 100%;
    max-height: 50vh;
    min-height: 50vh;
    overflow: auto;

    .list-item {
      width: 682px;
      margin: auto;
      display: flex;
      align-items: center;
      height: 132px;
      justify-content: space-between;
      border-bottom: 1px solid rgba(241, 241, 241, 1);

      .li-l {
        display: flex;
        align-items: center;
        height: 100%;

        img {
          width: 76px;
          height: 76px;
          border-radius: 20px;
          margin-right: 28px;
        }

        font-size: 28px;
        font-weight: 700;
        letter-spacing: 0px;
        // color: rgba(132, 144, 177, 1);
      }

      .li-r {
        width: 48px;
        height: 48px;
        background: rgba(243, 243, 243, 1);
        border: 2px solid rgba(235, 235, 235, 1);
        position: relative;
        border-radius: 50%;
      }

      &.active {
        .li-r {
          border: 2px solid rgba(238, 220, 201, 1);

          &::before {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            background: rgba(222, 191, 160, 1);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }

  .sure-btn {
    width: 682px;
    height: 93px;
    opacity: 1;
    background: linear-gradient(
      178.44deg,
      rgba(238, 220, 201, 1) 0%,
      rgba(220, 188, 155, 1) 100%
    );
    box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);
    margin: 60px auto;
    border-radius: 20px;
    user-select: none;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.querybox-c {
  width: 682px;
  padding: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;

  .qb-tit {
    width: 100%;
    text-align: center;
    padding: 24px 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0px;
    color: rgba(112, 126, 162, 1);
    border-bottom: 1px solid rgba(241, 241, 241, 1);
    margin-bottom: 12px;
  }

  .qb-nkis {
    height: 166px;
    background: rgba(246, 247, 255, 1);
    width: 100%;
    border-radius: 20px;
    padding: 0 40px;
    display: flex;
    align-items: center;

    img {
      width: 102px;
      height: 102px;
      border-radius: 20px;
      margin-right: 28px;
    }

    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0px;
    color: rgba(132, 144, 177, 1);
  }

  .qb-tbxc {
    width: 100%;
    height: 124px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(241, 241, 241, 1);
    margin-bottom: 36px;

    .qt-l {
      font-size: 24px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(171, 182, 212, 1);
    }

    .qt-r {
      font-size: 24px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(171, 182, 212, 1);
      display: flex;
      align-items: center;

      .icon {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        margin-left: 20px;
      }
    }
  }

  .btnlist {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn {
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(171, 182, 212, 1);
      width: 265px;
      height: 77px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      border-radius: 20px;

      &.cancel {
        background: rgba(242, 243, 246, 1);
        border: 1px solid rgba(223, 228, 241, 1);
      }

      &.ok {
        background: linear-gradient(
          178.44deg,
          rgba(238, 220, 201, 1) 0%,
          rgba(220, 188, 155, 1) 100%
        );
        box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);
        color: #fff;
      }
    }
  }
}
.textContent {
  width: 750px;
  height: 65%;
  opacity: 1;
  color: #fff;
  position: fixed;
  bottom: 0;
  padding: 32px;
  overflow-y: auto;
  font-size: 24px;
  line-height: 1.5;
  > p {
    color: #fff;
  }
}
</style>
